<template>
  <view class="list-bg">
    <view class="list-group">
      <uni-list :border="false">
        <uni-list-item title="联系人姓名" :border="true">
          <template #footer>
            <view class="cell-right">
              <input
                v-model="businessMan"
                :placeholder-style="placeholderStyle"
                type="text"
                maxlength="32"
                placeholder="输入姓名"
              >
            </view>
          </template>
        </uni-list-item>
        <uni-list-item title="联系人手机号码" right-text="输入手机号码" :border="true">
          <template #footer>
            <view class="cell-right">
              <input
                v-model="businessPhone"
                :placeholder-style="placeholderStyle"
                type="number"
                maxlength="11"
                placeholder="输入手机号码"
              >
            </view>
          </template>
        </uni-list-item>
        <uni-list-item title="公司名称" right-text="输入营业执照上的公司名称" :border="true">
          <template #footer>
            <view class="cell-right">
              <input
                v-model="companyName"
                :placeholder-style="placeholderStyle"
                type="text"
                maxlength="40"
                placeholder="输入营业执照上的公司名称"
              >
            </view>
          </template>
        </uni-list-item>
        <uni-list-item title="公司所在地" :border="true">
          <template #footer>
            <view class="cell-icon"><u-icon name="arrow-down" /></view>
            <text
              class="cell-right"
              :class="locateProvinceName != '' ? 'black-text' : ''"
              @click="selectPositionFn"
            >{{ areaName }}</text>
          </template>
        </uni-list-item>
        <uni-list-item title="公司详细地址" right-text="输入详细地址" :border="true">
          <template #footer>
            <view class="cell-right">
              <!--              <input
                v-model="detailAddress"
                type="text"
                maxlength="32"
                placeholder="输入详细地址"
              >-->
              <textarea
                v-model="detailAddress"
                :placeholder-style="placeholderStyle"
                maxlength="32"
                placeholder="输入详细地址"
              />
            </view>
          </template>
        </uni-list-item>
        <uni-list-item title="业务类型" :border="true">
          <template #footer>
            <view class="cell-icon"><u-icon name="arrow-down" /></view>
            <text
              class="cell-right"
              :class="businessType != '' ? 'black-text' : ''"
              @click="pickerShowFn"
            >
              {{ pickerItem.label }}
            </text>
          </template>
        </uni-list-item>
        <uni-list-item title="营业执照注册号" right-text="输入营业执照上的注册号" :border="true">
          <template #footer>
            <view class="cell-right">
              <input
                v-model="businessLicenseNum"
                :placeholder-style="placeholderStyle"
                type="text"
                maxlength="15"
                placeholder="输入营业执照上的注册号"
                @input="businessLicenseNumReplaceFn"
              >
            </view>
          </template>
        </uni-list-item>
        <uni-list-item>
          <template #header>
            <view class="cell-pic">营业执照</view>
            <view class="cell-pic-input">
              <u-upload
                :file-list="fileList"
                name="1"
                :preview-full-image="true"
                @afterRead="afterRead"
                @delete="deletePic"
              >
                <image v-if="licencePicPath" class="cell-img" :src="licencePicPath" />
                <image v-else class="cell-img" src="/ycPayments/static/image/add.png" />
              </u-upload>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <u-picker
      :show="pickerShow"
      :columns="pickerColumns"
      key-name="label"
      @confirm="pickerSelectFn"
      @cancel="cancelHandlingFn"
    />
    <view class="btn-box">
      <button
        class="btn confirm-btn"
        plain="true"
        @click.stop="$u.throttle(memberCertificationFn, 500)"
      >
        提交
      </button>
    </view>
  </view>
</template>

<script>
import {
  memberCertification,
} from '@/api/yc_invoice';

export default {
  name: 'Index',
  data() {
    return {
      businessLicenseNum: '',
      businessMan: '',
      businessPhone: '',
      businessType: '',
      companyName: '',
      detailAddress: '',
      licencePicPath: '',
      locateAreaCode: '',
      locateAreaName: '',
      locateCityCode: '',
      locateCityName: '',
      locateProvinceCode: '',
      locateProvinceName: '',
      locateStreetCode: '',
      locateStreetName: '',
      areaName: '请选择省/市/区',
      positionObj: {},
      placeholderStyle: 'color:#999;font-size:28rpx;padding: 0;',
      pickerShow: false,
      pickerItem: {
        label: '请选择',
        id: ''
      },
      pickerColumns: [
        [
          {
            label: '工程',
            id: 15625
          },
          {
            label: '商贸',
            id: 15627
          },
          {
            label: '政府',
            id: 40741
          },
          {
            label: '工业',
            id: 15626
          }
        ]
      ],
      fileList: [],
    }
  },
  watch: {
    positionObj: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.areaName = newVal[0].name + newVal[1].name + newVal[2].name + newVal[3].name
          this.locateProvinceCode = newVal[0].keyName
          this.locateProvinceName = newVal[0].name
          this.locateCityCode = newVal[1].keyName
          this.locateCityName = newVal[1].name
          this.locateAreaCode = newVal[2].keyName
          this.locateAreaName = newVal[2].name
          this.locateStreetCode = newVal[3].keyName
          this.locateStreetName = newVal[3].name
        })
      }
    }
  },
  methods: {
    memberCertificationFn() {
      const {
        businessLicenseNum,
        businessMan,
        businessPhone,
        businessType,
        companyName,
        detailAddress,
        licencePicPath,
        locateAreaCode,
        locateAreaName,
        locateCityCode,
        locateCityName,
        locateProvinceCode,
        locateProvinceName,
        locateStreetCode,
        locateStreetName,
      } = this
      const params = {
        'businessMan': businessMan,
        'businessPhone': businessPhone,
        'companyName': companyName,
        'locateAreaCode': locateAreaCode,
        'locateAreaName': locateAreaName,
        'locateCityCode': locateCityCode,
        'locateCityName': locateCityName,
        'locateProvinceCode': locateProvinceCode,
        'locateProvinceName': locateProvinceName,
        'locateStreetCode': locateStreetCode,
        'locateStreetName': locateStreetName,
        'detailAddress': detailAddress,
        'businessType': businessType,
        'businessLicenseNum': businessLicenseNum,
        'licencePicPath': licencePicPath,
      }
      const errorObj = {
        'businessMan': '请输入联系人姓名',
        'businessPhone': '请输入联系人手机号码',
        'companyName': '请输入公司名称',
        'locateAreaCode': '请选择公司所在地',
        'locateAreaName': '请选择公司所在地',
        'locateCityCode': '请选择公司所在地',
        'locateCityName': '请选择公司所在地',
        'locateProvinceCode': '请选择公司所在地',
        'locateProvinceName': '请选择公司所在地',
        'detailAddress': '请输入公司详细地址',
        'businessType': '请选择业务类型',
        'businessLicenseNum': '请输入营业执照注册号',
        'licencePicPath': '请上传营业执照',
        // 'locateStreetCode': '请选择公司所在地',
        // 'locateStreetName': '请选择公司所在地',
      }
      try {
        for (const paramsKey in params) {
          if (!params[paramsKey]) {
            throw new Error(errorObj[paramsKey])
          }
        }
      } catch (e) {
        this.$u.toast(e.message)
        return
      }
      memberCertification(params).then((res) => {
        if (res.errorCode == 0) {
          this.$u.toast('提交成功')
          uni.redirectTo({
            url: `/ycPayments/upgrade/success`,
          })
        } else {
          this.$u.toast(res.errorMessage)
        }
      })
    },
    /*选择地址*/
    selectPositionFn() {
      uni.navigateTo({
        url: `/ycPayments/upgrade/selectArea?objKey=positionObj`,
      })
    },
    /*打开业务类型选择*/
    pickerShowFn() {
      this.pickerShow = true
    },
    cancelHandlingFn(){
        this.pickerShow = false
    },
    /*业务类型选择 columnIndex、value、values*/
    pickerSelectFn(e) {
      this.pickerItem = e.value[0]
      this.businessType = e.value[0].id
      this.pickerShow = false
    },
    // 删除图片
    deletePic(event) {
      this[`fileList`].splice(event.index, 1)
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      const lists = [].concat(event.file)
      let fileListLen = this[`fileList`].length
      lists.map((item) => {
        this[`fileList`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        await this.uploadFilePromise(lists[i].url).then((res) => {
          const item = this[`fileList`][fileListLen]
          this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: res
          }))
          this.licencePicPath = res
        })
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: `${this.vuex_baseURL.ycUrl}/baseservice/uploadForIE8`, // 仅为示例，非真实的接口地址
          filePath: url,
          fileType: 'image', //支付宝小程序必填
          name: 'file',
          formData: {},
          success: (res) => {
            setTimeout(() => {
              resolve(JSON.parse(res.data)[0].fullPath)
            }, 1000)
          }
        });
      })
    },
    businessLicenseNumReplaceFn() {
      this.$nextTick(() => {
        this.businessLicenseNum = this.businessLicenseNum.replace(/[^\w_]/g, '')
      })
    }
  }
}
</script>

<style scoped lang="scss">
.list-bg{
  padding: 0;
  margin: 24rpx 32rpx;
}
/deep/.uni-list-item__container {
  padding: 24rpx 0!important;
}
  .list-group{
  padding:14rpx 32rpx 50rpx;
  border-radius: 16rpx;
  .cell-icon{
    float: right;
    margin: 4rpx 0 0 10rpx;
    /deep/ .u-icon__icon{
      font-size:$uni-font-size-sm!important;
      color: $uni-grey-999!important;
    }
  }
  .cell-right{
    color: $uni-grey-999;
    font-size: $uni-font-size-base;
    float: right;
    input{
      color: $uni-text-color;
      text-align: right;
    }
    textarea{
      width: 400rpx;
      height: 120rpx;
      color:#222;
      text-align: right;
    }
  }
  .black-text{
    color: $uni-text-color;
  }
  .cell-pic{
    font-size: $uni-font-size-base;
  }
  .cell-pic-input, .cell-img{
    width: 160rpx;
    height: 160rpx;
    margin: 16rpx 0 0;
    overflow: hidden;
    border-radius: 8rpx;
    /deep/.u-icon__icon{
      color: #e2e2e2!important;
      margin:64rpx 0 0 64rpx;
    }
  }
    .cell-img{
      margin: 0;
      border: 0;
    }
}
.btn-box{
  position: absolute;
  left: 64rpx;
  bottom: 68rpx;
  .confirm-btn{
    width: 624rpx;
    height: 64rpx;
    line-height: 64rpx;
    color: $uni-bg-color;
    background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
    font-size: $uni-font-size-base;
    border: 0;
  }
}
/deep/ .uni-list-item__extra{
           width:380rpx;
         }
/deep/.uni-list-item__content-title{
  font-size: $uni-font-size-base;
  /*#ifdef MP-ALIPAY*/
  padding-top:10rpx;
  /*#endif*/
}
/deep/ .u-upload__deletable__icon{
  top: -27rpx;
  right: -3rpx;
}
/deep/.u-icon__icon {
  margin: 0!important;
}
/deep/.uni-list--border:after{
  background: $uni-f5bg-color;
}
</style>
